<template>
  <van-card
    :num="item.goods_number"
    :price="item.price"
    :desc="item.title"
    :title="item.category"
    :thumb="item.img_small_logo"
    v-for="item in cart"
    :key="item.id"
  >
    <template #tags>
      <van-checkbox-group v-model="checkedResult" @change="handleCheckedChange">
        <van-checkbox :name="item.goods_id"></van-checkbox>
      </van-checkbox-group>
      <van-tag plain type="primary">+</van-tag>
      <van-tag plain type="primary">{{ item.goods_number }}</van-tag>
      <van-tag plain type="primary">-</van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="sc(item.goods_id)">删除</van-button>
      <van-button size="mini">结算</van-button>
    </template>
  </van-card>
  <van-submit-bar
    :price="totalPrice"
    button-text="提交订单"
    @submit="onSubmit"
    :style="{ marginBottom: '15vw' }"
  >
    <van-checkbox v-model="isCheckAll" @change="handleCheckAllChange">
      全选
    </van-checkbox>
  </van-submit-bar>
  <van-tabbar v-model="active" placeholder>
    <van-tabbar-item icon="home-o" to="/home">主页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/about">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/video">视频</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, computed } from 'vue'
// import axios from 'axios'
import { showToast } from 'vant'
import http from '../xyq.js'

const active = ref(1)
const cart = ref([])
const isCheckAll = ref(false)
const checkedResult = ref([])

// 获取购物车数据
// 获取购物车数据
const hqsj = () => {
  http
    .get('/cart/list', {
      params: {
        id: localStorage.getItem('user'),
      },
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log(res.data.cart)
      cart.value = res.data.cart
    })
    .catch(error => {
      console.error('Error fetching cart:', error)
      if (error.response) {
        // 服务器返回了错误响应
        console.error('Server responded with status:', error.response.status)
        console.error('Response data:', error.response.data)
      } else if (error.request) {
        // 请求已发出但没有收到响应
        console.error('No response received:', error.request)
      } else {
        // 发生了其他错误
        console.error('Error message:', error.message)
      }
      console.log('大意了')
    })
}
hqsj()
// 删除商品
const sc = id => {
  http
    .get('/cart/remove', {
      params: {
        id: localStorage.getItem('user'),
        goodsId: id,
      },
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log(res.data)
      cart.value = res.data.cart
      // 更新选中状态
      checkedResult.value = checkedResult.value.filter(
        goodsId => goodsId !== id,
      )
      handleCheckedChange(checkedResult.value)
    })
    .catch(error => {
      console.error('Error removing item:', error)
    })
}

// 提交订单
const onSubmit = () => {
  showToast('提交成功')
}

// 处理全选变化
const handleCheckAllChange = val => {
  if (val) {
    checkedResult.value = cart.value.map(item => item.goods_id)
  } else {
    checkedResult.value = []
  }
}

// 处理单个复选框变化
const handleCheckedChange = value => {
  const checkedCount = value.length
  isCheckAll.value = checkedCount === cart.value.length
}

// 计算总价
const totalPrice = computed(() => {
  return (
    cart.value
      .filter(item => checkedResult.value.includes(item.goods_id))
      .reduce((total, item) => total + item.price * item.goods_number, 0) * 100
  )
})
</script>

<style lang=""></style>
